html {
  font-family: $font-sans;
  font-size: $em-base;
}

body {
  font-size: $base-font-size;
}

p {
  line-height: $base-line-height;
  margin-bottom: 1em;
  margin-top: 1em;
}

a {
  color: $color-primary;
  text-decoration: underline;

  &:hover,
  &:active {
    color: $color-primary-darker;
  }

  &:visited {
    color: $color-visited;
  }

  &:focus {
    box-shadow: $focus-shadow;
    outline: 0;
  }
}

@mixin external-link($external-link, $external-link-hover) {
  &::after {
    background: url('#{$image-path}/#{$external-link}.png') no-repeat 0 0;
    background: url('#{$image-path}/#{$external-link}.svg') no-repeat 0 0;
    background-size: 100%;
    content: '';
    display: inline-block;
    height: 0.65em;
    margin-bottom: -1px;
    margin-left: 4px;
    width: 0.65em;
  }

  &:hover::after {
    background-image: url('#{$image-path}/#{$external-link-hover}.png');
    background-image: url('#{$image-path}/#{$external-link-hover}.svg');
  }
}

// External link consider "effortless style approach":
// [href^="http:"]:not([href*="my-domain.com"])
// [href^="https:"]:not([href*="my-domain.com"])

.usa-external_link {
  @include external-link(external-link, external-link-hover);
}

.usa-external_link-alt {
  @include external-link(external-link-alt, external-link-alt-hover);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  clear: both;
  font-family: $font-serif;
  line-height: $heading-line-height;
  margin-bottom: .5em;
  margin-top: 1.5em;
}

// Create heading mixins

@mixin title {
  font-size: $title-font-size;
  font-weight: $font-bold;
}

@mixin h1 {
  font-size: $h1-font-size;
  font-weight: $font-bold;
}

@mixin h2 {
  font-size: $h2-font-size;
  font-weight: $font-bold;
}

@mixin h3 {
  font-size: $h3-font-size;
  font-weight: $font-bold;
}

@mixin h4 {
  font-size: $h4-font-size;
  font-weight: $font-bold;
}

@mixin h5 {
  font-size: $h5-font-size;
  font-weight: $font-bold;
}

@mixin h6 {
  font-family: $font-sans;
  font-size: $h6-font-size;
  font-weight: $font-normal;
  text-transform: uppercase;
}

h1 {
  @include h1();
}

h2 {
  @include h2();
}

h3 {
  @include h3();
}

h4 {
  @include h4();
}

h5 {
  @include h5();
}

h6 {
  @include h6();
}

// Remove user agent styles

cite,
var,
address,
dfn {
  font-style: normal;
}

// Custom typography

.usa-content {
  p:not(.usa-font-lead) {
    max-width: $text-max-width;
  }
}

.usa-content-list {
  max-width: $text-max-width;
}

.usa-sans {
  p,
  a,
  li,
  span {
    font-family: $font-sans;
  }

  a {
    border-bottom: none;
    font-weight: $font-bold;
  }
}

.usa-serif {
  p,
  a,
  li,
  span {
    font-family: $font-serif;
  }
}

.usa-display {
  @include h3();
  margin-bottom: 0;

  @include media($small-screen) {
    @include h1();
  }

  @include media($medium-screen) {
    @include title();
  }
}

.usa-font-lead {
  font-family: $font-serif;
  font-size: $lead-font-size;
  line-height: $lead-line-height;
  max-width: $lead-max-width;
}

.usa-image-block {
  position: relative;
}

.usa-image-text-block {
  color: $color-white;
  left: 0;
  margin-left: 8%;
  position: absolute;
  top: 0;
}

.usa-image-text {
  margin-top: 0;
}

.usa-drop_text {
  margin-bottom: 0;
}

.usa-background-dark {
  background-color: $color-gray-dark;

  p,
  span {
    color: $color-white;
  }

  a {
    color: $color-gray-lighter;

    &:hover {
      color: $color-white;
    }
  }
}

.usa-text-small {
  font-size: $h6-font-size;
  margin-top: 0;
}
